import React from 'react';
import { Form, Input, Modal, DatePicker } from 'antd';
const FormItem = Form.Item;

class FormInner extends React.Component {
  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        values.order_time = values.order_time.format('YYYY-MM-DD HH:mm:ss');
        this.props.onOk(values);
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    return (
      <div>
        <Modal
          title={this.props.title}
          visible={this.props.addVisible}
          onOk={this.handleSubmit}
          onCancel={() => { this.props.onCancel(); }}
        >
          <Form>
            <FormItem
              {...formItemLayout}
              label="单据编号"
            >
              {getFieldDecorator('order_number', {
                rules: [{ required: true, message: '请填写单据编号!' }],
              })(
                <Input />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="客户名称"
            >
              {getFieldDecorator('custom_name', {
                rules: [{ required: true, message: '请填写客户名称!' }],
              })(
                <Input />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="下单日期"
            >
              {getFieldDecorator('order_time', {
                rules: [{ required: true, message: '请选择下单日期!' }],
              })(
                <DatePicker
                  style={{ width: '100%' }}
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="填写下单日期"
                />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="应付金额"
            >
              {getFieldDecorator('amount_payable', {
                rules: [{ required: true, message: '请填写应付金额!' }],
              })(
                <Input type="number" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="已付金额"
            >
              {getFieldDecorator('amount_paid', {
                rules: [{ required: true, message: '请填写已付金额!' }],
              })(
                <Input type="number" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="备注"
            >
              {getFieldDecorator('remark', {
                rules: [{ required: true, message: '请填写备注备注!' }],
              })(
                <Input />
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}
const AddOrder = Form.create({
  mapPropsToFields(props) {
    const { fields } = props;
    if (!fields) return;
    return {
      order_number: Form.createFormField({
        ...fields.order_number,
        value: fields.order_number.value,
      }),
      custom_name: Form.createFormField({
        ...fields.custom_name,
        value: fields.custom_name.value,
      }),
      order_time: Form.createFormField({
        ...fields.order_time,
        value: fields.order_time.value,
      }),
      amount_payable: Form.createFormField({
        ...fields.amount_payable,
        value: fields.amount_payable.value,
      }),
      amount_paid: Form.createFormField({
        ...fields.amount_paid,
        value: fields.amount_paid.value,
      }),
      remark: Form.createFormField({
        ...fields.remark,
        value: fields.remark.value,
      }),
    };
  },
})(FormInner);
export default AddOrder;